<script lang="tsx" setup>
/**
 * 设备月稼动率排行榜
 */
import {onMounted, onUnmounted, ref, watch} from "vue"
import Scrollable from "@/frame/utils/scrollable"

/**
 * 定义props
 */
const props = defineProps<{
  warningStateData: any
}>()

/**
 * 列表数据
 */
const list: any = ref([])

/**
 * 滚动列表实例
 */
const scrollInstance = ref()
const scrollFatherRef = ref()

/**
 * 获取数据
 */
const getData = (value: any[]) => {
  list.value = value
  setTimeout(() => {
    initScroll()
  }, 5000)
}

/**
 * 初始化滚动
 */
const initScroll = () => {
  if (scrollInstance.value) {
    scrollInstance.value.dispose()
  }
  const scrollElement = scrollFatherRef.value.querySelector(".list")
  if (!scrollElement) {
    return
  }
  scrollInstance.value = new Scrollable({
    interval: 5000,
    containerEl: scrollFatherRef.value,
    scrollEl: scrollElement,
    listEl: scrollElement,
    mode: "item",
    continuous: true
  })
  scrollInstance.value.init()
}

/**
 * 监视
 */
watch(() => props.warningStateData, (newValue) => {
  if (newValue) {
    getData(newValue)
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="warning-state">
    <div class="title-box">
      <div class="title-img">
        <img alt="" class="title-img-logout" src="/img/data-cockpit/item-title.png"/>
      </div>
      <div class="title">
        <div class="title-content">预警分析</div>
      </div>
    </div>
    <div ref="scrollFatherRef" class="table">
      <div class="list">
        <div v-for="(item,index) in list" :key="index" class="item">
          <div class="row">
            <div class="td">{{ item.time }}</div>
            <div class="td">{{ item.deviceCode }}</div>
            <div class="td">{{ item.deviceName }}</div>
            <div class="td">{{ item.badReason }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>